<!--
 * @Description: 
 * @Author: jiaxiuc
 * @Date: 2024-04-18
 * @LastEditors: jiaxiuc
 * @LastEditTime: 2024-04-22
-->

<template>
    <div class="page-wrap vform">
      <van-nav-bar :title="viewName"/>
      <van-form @submit="onSubmit">
        <div clas="field-item" v-for="item in fieldList" :key="item.id">
          <!-- 文本 -->
          <van-field v-if="item.fieldType==1"  rows="1" autosize type="textarea" v-model="form[item.feishuFieldName]" :label="item.feishuFieldName" :placeholder="item.feishuFieldName" @input="fieldInput($event,item.feishuFieldName)"/>
          <!-- 单选 -->
          <!-- <van-field v-if="item.fieldType==3" :label="item.feishuFieldName">
            <template #input>
              <van-radio-group v-model="form[item.feishuFieldName]" direction="horizontal">
                <van-radio v-for="(sub,i) in item.fieIdExt" :key="i" :name="sub.name" @click="radioBtn(item.feishuFieldName,sub.name)">{{sub.name}}</van-radio>
              </van-radio-group>      
            </template>
          </van-field> -->
          <van-field v-if="item.fieldType==3" :label="item.feishuFieldName">
            <template #input>
              <select class="field-select" v-model="form[item.feishuFieldName]" :placeholder="item.feishuFieldName">
                <option selected="selected" disabled="disabled" value="">请选择</option>
                <option v-for="(sub,i) in item.fieIdExt" :key="i" :value="sub.name" @click="radioBtn(item.feishuFieldName,sub.name)">{{sub.name}}</option>
              </select>
              
              <!-- <van-radio-group v-model="form[item.feishuFieldName]" direction="horizontal">
                <van-radio v-for="(sub,i) in item.fieIdExt" :key="i" :name="sub.name" @click="radioBtn(item.feishuFieldName,sub.name)">{{sub.name}}</van-radio>
              </van-radio-group>       -->
            </template>
          </van-field>
          <!-- 文件上传 -->
          <van-field name="a" v-if="item.fieldType==15" :label="item.feishuFieldName">
            <template #input>
              <van-uploader :name="item.feishuFieldName" v-model="form[item.feishuFieldName]" multiple :before-read="beforeUpload" :after-read="afterUpload" @delete="deleteUpload"/>
            </template>
          </van-field>
           <!-- 人员 -->
           <van-field v-if="item.fieldType==11"  rows="1" autosize type="textarea" v-model="form[item.feishuFieldName].name" :label="item.feishuFieldName" :placeholder="item.feishuFieldName" disabled/>
        </div>
        <div style="margin: 16px auto 0;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
      <div class="success" v-if="succBool">
          <van-empty description="提交成功">
            <template slot="image">
              <van-icon name="passed" color="#07c160" size="160px"/>
            </template>
            <template slot="description">
               <p style="font-size:20px;margin-top:30px;">提交成功</p>
            </template>
          </van-empty>
      </div>
    </div>
  </template>
  
  <script>
  // import _ from 'underscore';  
import CONFIG from "@/config/config";
import storage from "@/utils/storage";
import { vformService } from '@/api'
let id;
  export default {
    name: 'Vfrom',
    data() {
      return {
        succBool:false,
        viewName:'',
        fieldList:[],
        form:{
          
        }
      };
    },
    //在实例创建完成后被立即调用
    created: async function () {
      id = this.$route.query.id||1;
      const res = await vformService.selectViewList({id});
      if(res?.error?.msg){
        return this.$toast.fail(res?.error?.msg);
      }
      this.userInfo = {
        name: storage.getItem(CONFIG.NAME),
        id:storage.getItem(CONFIG.OPENID)
      }
      this.viewName =  res?.result?.viewConfig?.viewName||'现场品管提交清单';
      this.fieldList = res?.result?.fieldList?.map((item) => {
        if(item.fieldType==15){
          this.form[item.feishuFieldName] = [];           
        }else if(item.fieldType==11){
          this.form[item.feishuFieldName] = this.userInfo;
        }else{
          this.form[item.feishuFieldName] = '';
        }
        if(item.fieIdExt){
          item.fieIdExt = JSON.parse(item.fieIdExt);
        }
        return item;
      })
    },
    //方法
    methods: {
      fieldInput(value,key){
         this.form[key] = value; 
         this.$forceUpdate();
      },
      radioBtn(key,value){
        this.form[key] = value; 
        this.$forceUpdate();
      },
      beforeUpload(){
        // console.log('beforeUpload',file)
        return true;
      },
      async afterUpload(data,{name}){
        //const formData = new FormData();
       // formData.append('file', data.file);
        //const res = await vformService.uploadFile(formData);

        this.$forceUpdate();
        console.info(112233,name,this.form)
      },
      deleteUpload(){
        this.$forceUpdate();
      },
      async onSubmit() {

        const params = {
          id,
          images:[],
          fields:{}
        }
        this.$toast.loading({
          message:'提交中···',
          duration:0
        })
        for(let i = 0;i<this.fieldList.length;i++){
          const item = this.fieldList[i];
          const key = item.feishuFieldName;
          if(item.fieldType==15){//调用文件上传
            if(this.form[key].length){
              const formData = new FormData();
              this.form[key].forEach(file=>{
                formData.append('file', file.file);
              })
              const res = await vformService.uploadFile(formData);
              params.images.push(...res.result);
            }
          }else if(item.fieldType==11){
            params.fields[key] = [this.userInfo];
          }else{
            params.fields[key] = this.form[key];
          }
        } 
        const res = await vformService.addTableRecords(params);
        if(res.result=='success'){
           this.$toast.clear();
           this.succBool = true;
        }else{
          return this.$toast.fail(res?.error?.msg||'提交失败');
        }
      }
    },
    //一个对象，键是需要观察的表达式，值是对应回调函数
    watch: {},
  };
  </script>
  
  
  <style scoped lang="less">
    @import './vform.less';
  </style>
  